<template>
	<view class="index">
		 <view class="status_bar">
		    <view class="top_view"></view> 
		</view>
		<view class="content">
			<view class="header_back">
				<view class="back_img" @tap="go_back">
					<image src="/static/imgs/back.png" mode="aspectFill"></image>
				</view>
				<view class="header_content">
					账户与安全
				</view>
				<view class="back_img"> </view>
			</view>
			<navigator url="/pages/public/unbuindPhone?id=1">
				<view class="cell">
					<text class="infotxta">手机号绑定</text>
					<text class="phonenuber">{{user.phone}}</text>
					<!-- <view class="changebox">
						<text>更换</text>
						<image src="/static/imgs/right.png" class="rightsa" mode="aspectFill"></image>
					</view> -->
					
				</view>
			</navigator>
			<view class="emptybox">
				
			</view>
			<view class="logout" @tap="logout">
				退出登录
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return {
				user:{}
			}
		},
		onShow() {
			let _this = this;
			uni.getStorage({
				key:"userInfo",
				success(e) {
					_this.user =JSON.parse(e.data) ;
				}
			})
		},
		
		methods:{
			go_back(){
				uni.navigateBack();
			},
			logout(){
				uni.clearStorage();
				uni.switchTab({
					url:"/pages/home/home"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		min-height:calc(100% + 30upx);
		position: relative;
		background-color: #F1F1F1;
		padding-top: 100upx;

		.header_back {
			display: flex;
			align-items: center;
			height: 100upx;
			background-color: #000;
			flex-direction: row;
			position: fixed;
			top: var(--status-bar-height);
			z-index: 9;
			width: 100%;
			.header_content{
				text-align: center;
				font-size: 32upx;
				color:#fff;
				flex: 12;
			}
			.back_img {
				flex: 1;
				height: 40upx;
				margin-left: 40upx;
				margin-right: 20upx;
			
				image {
					width: 40upx;
					height: 40upx;
				}
			}
			.more_icon {
				width: 32upx;
				height: 48upx;
				flex: 2;
				display: inline-block;
				vertical-align: super;
			
				image {
					width: 48upx;
					height: 48upx;
				}
			}
		}
		
		.logout{
			width: 100%;
			height: 90upx;
			color: red;
			text-align: center;
			line-height: 90upx;
			background-color: #fff;
		}
	}
	.cell{
			background-color: #fff;
		width: 100%;
		height: 160upx;
		border-bottom: 1upx solid #f5f5f6;
		
	}
	.infotxta{
		display: block;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		padding-left: 30upx;
		color: #333;
		font-weight: bold;
		font-size: 30upx;
	}
	.phonenuber{
		display: inline-block;
		width: 650upx;
		padding-left: 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #666;
	}
	.changebox{
		display: inline-block;
		width: 100upx;
		image{
			width: 28upx;
			height: 28upx;
			
		}
		text{
			font-size: 30upx;
			color: #BFBFBF;
		}
	}
</style>
